<template>
  <div class="demo-select-size">
    <div class="column-divider">
      <div class="demo-button-line">
        <div class="d-title">默认</div>
        <e-select
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">中型</div>
        <e-select
          size="middle"
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>

    <div class="column-divider">
      <div
        class="demo-button-line">
        <div class="d-title">可清除</div>
        <e-select
          clearable
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
      <div
        class="demo-button-line">
        <div class="d-title">不可编辑</div>
        <e-select
          disabled
          style="width:200px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value">{{ item.label }}</e-option>
        </e-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectSize',
  data () {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ]
    }
  }
}
</script>
<style>
.demo-select-size .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color:rgba(98,54,255,1);
  display: inline-block;
  width: 4rem;
  margin-bottom: 20px;
}

</style>
